<!--
  民主测评首页-头部搜索新建模块
- -->
<template>
  <div class="evaluation-search-box">
    <div class="search-left">
      <!-- 季度选择 -->
      <div class="search-item">
        <div class="select_lable">季度：</div>
        <el-select
          class="quarter_select"
          v-model="quarterInx"
          placeholder="请选择"
          size="small"
          :popper-append-to-body="false"
          @change="onQuarterChange">
          <el-option
            v-for="item in quarterSelect"
            :key="item.value"
            :value="item.value"
            :label="item.label"></el-option>
        </el-select>
      </div>
      <!-- 审核状态 -->
      <div class="search-item">
        <div class="select_lable">{{ tab === '1' ? '审核状态' : '完成情况' }}：</div>
        <el-select
          class="status_select"
          v-model="selectParams.assessmentStatus"
          placeholder="请选择"
          size="small"
          :popper-append-to-body="false"
          @change="onParamChange">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
<script>
import { getQuarterAssessPeriods } from '@apis/grade.js'
export default {
  name: 'EvaluationSelect',
  emits: ['select'],
  props: {
    // 状态列表
    status: {
      type: Array,
      default: () => [],
    },
    tab: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      quarterSelect: [],
      quarterInx: '',
      selectParams: {
        key: '',
        assessmentStatus: '',
      },
    }
  },
  watch: {
    tab: {
      handler(newId, oldId) {
        if (oldId && newId !== oldId) {
          this.quarterInx = 0
          this.selectParams.key = this.quarterSelect.length ? this.quarterSelect[0].label : ''
          this.selectParams.assessmentStatus = newId === '1' ? '' : '0'
          this.onParamChange()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getQuarterList()
  },
  methods: {
    /* 搜索条件 */
    onParamChange() {
      this.$emit('select', this.selectParams)
    },
    /* 获取季度 */
    getQuarterList() {
      getQuarterAssessPeriods().then(res => {
        if (res.status === 200 && res.data && res.data.length) {
          const arr = []
          const data = res.data || []
          for (let i = 0; i < data.length; i++) {
            arr.push({
              value: i,
              label: data[i].periodName,
              quarter: data[i].quarter,
              year: data[i].year,
            })
          }
          this.selectParams.key = data.length ? data[0].periodName : ''
          this.onParamChange()
          if (arr.length) {
            this.quarterInx = 0
          }
          this.quarterSelect = arr.concat()
        }
      })
    },
    onQuarterChange() {
      const obj = this.quarterSelect[this.quarterInx]
      this.selectParams.key = obj.label || ''
      this.onParamChange()
    },
  },
}
</script>
<style lang="scss" scoped>
.evaluation-search-box {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search-left {
    display: flex;
    align-items: center;
    .search-item {
      display: flex;
      align-items: center;
      margin-right: 25px;
      .select_lable {
        color: #333;
        font-size: 14px;
        font-weight: 600;
        margin-right: 10px;
      }
      .quarter_select,
      .status_select {
        width: 200px;
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>
